@import "styles/theme_colors";
@import "styles/mixins";

.ingredients_details {
  position: fixed;

  left: calc(50% - 360px);
  top: calc(50% - 320px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 640px;
  width: 720px;

  color: $theme_white;

  border-radius: 40px;

  &_title {
    width: 80%;
    height: 10%;

    display: flex;
    justify-content: space-between;
    align-items: center;

    svg:hover {
      fill: $theme_white;
    }
  }

  img {
    width: 65%;
  }

  &_features {
    width: 100%;
    height: 20%;

    display: flex;
    flex-direction: row;
    justify-content: space-around;

    .feature {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      p {
        color: $theme_light;
      }
    }
  }
}

.transparent {
  background-color: transparent;
  box-shadow: none;

  svg {
    display: none;
  }
}

.status {
  position: absolute;
  left: 50%;
  top: 50%;

  font-size: 30px;
}

.modal_background {
  @include modal_background;
}
